﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" charset='utf-8'>
<head>
   <title></title>
   <link type="text/css" rel="Stylesheet" href="jquery/jquery.uploadify-v2.1.4/uploadify.css" />
   <link type="text/css" rel="Stylesheet" href="jquery/zoom/cloud-zoom.css" />
   <style type="text/css">
    .img_content{float:left; padding-left:25px; padding-top:12px;padding-bottom:15px; width:420px; position:relative}
    .delBtn{display: block; cursor:hand; position:absolute; right:25px;float:left }
    .fname_span{ position: relative; right: 1px;display: block;width:100px;overflow: hidden;white-space: nowrap;text-overflow:ellipsis; }
    #c_loading{ display:none}
   </style>
   <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="jquery/jquery.uploadify-v2.1.4/swfobject.js"></script>
   <script type="text/javascript" src="jquery/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
   <script type="text/javascript" src="jquery/jquery-tooltip/js/jtip.js"></script>
   <script type="text/javascript" src="jquery/jquery.cluetip.js"></script>
   <script type="text/javascript" src="jquery/jquery.hoverIntent.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {

            $("#uploadify").uploadify({
            'uploader': 'jquery/jquery.uploadify-v2.1.4/uploadify.swf',
            'buttonImg': 'img/Popup_buttom_Bg.gif',
                'buttonText':'Select',
                'script': 'ExtHandler/FileUpload.ashx',
                'cancelImg': 'jquery/jquery.uploadify-v2.1.4/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'fileExt': '*.jpg',
                'fileDesc': '请选择图片',
                'auto': false,
                'multi': true,
                'onComplete': function(e, qid, fObj, resp, d) {
                    //$("#info_content").text('速度:' + d.speed + '</br>' + '创建时间:' + resp);
                    var div = $("#" + qid);
                    var tmp = resp.split("^");
                    var url = tmp[0];
                    var filename = tmp[1];
                    var waitAppend = "<div id='" + qid + "' class='img_content'><div style='width:100%; position:absolute;top:-5px;'>" +
                                    "  <img src='img/cross.png' alt='删除' onclick='delPic(this)' class='delBtn'>" +
                                    "  <span class='fname_span' title=" + fObj.name + ">" + fObj.name + "</span>" +
                                    " </div>" +
                                        " <div><img width='420' height='340' alt='' title='dd'  src='" + url + "'></div>" +
                                     "</div>";
                    $("#info_content").append(waitAppend);
                    //console.log(div);
                    $("#" + qid).data(qid, filename);
                }
            });
        });
        //$('.fname_span.title').cluetip({ splitTitle: '|' });
        function delPic(obj) {
            var id = $(obj).parent('div').parent('div').attr('id');
            var p = $("#" + id).position();
            var div_width=$("#" + id).width();
            var div_height = $("#" + id).height();
            var picname=$("#"+id).data(id);
            //
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: "ExtHandler/FileUpload.ashx",
                data: "type=delPic&picname=" + picname,
                
                success: function(json) {
                    if (json = true) {
                        $("#" + id).remove();
                    }
                }
            });
        }

        function btnClick() {
            if ($("#dd").attr('checked')) {
                alert(1);
            }
            alert(2);
        }
    </script>
    
    
</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
      <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
    <div id='showZoom' style="width:800; height:600;">
       <input type="checkbox" id="dd"/>
       <input type="button" id="btn" value="lllll" onclick="btnClick()" />
    </div>
    <div id='info_content'>
        
    </div>
    <div id='c_loading'>
            <img src="img/loading.gif" />
    </div>

</body>
</html>
